<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>
    <style>
        /* 
            元素选择器
                例如 p{} div{} 
        */

        /* 
            id选择器
                作用: 根据元素的id属性值选中一个元素
                语法: #id属性值{}
                例子: #box{} #red{}
        */
        p{
            color: brown;
            font-size: 30px;
        }
        #abc{
            color: blanchedalmond;
            font-size: 40px;
        }
        /* 
            class是一个标签的属性，它和id类似，不同的是class可以重复使用
                可以通过class属性来为元素分组
                根据元素的class属性值选中一组元素
                语法: .class{}
        */
        .blue{
            color: blue;
        }
        .abc{
            font-size: 50px;
        }
        /* 
            通配选择器
                作用: 选中页面中的所有元素
                语法: *{}
        */
        *{
            color: black;
        }
    </style>
</head>
<body>
    <h1 class="blue">这是一个标题</h1>
    <p>少小离家老大回</p>
    <p id="abc">少小离家老大回</p>
    <p class="blue">少小离家老大回</p>
    <p class="blue">少小离家老大回</p>
    <!-- 多个class用空格隔开 -->
    <p class="blue abc">少小离家老大回</p>
    <p>少小离家老大回</p>
    <a>111222333</a>
</body>
</html>